<template>
  <div class="client-info">
    <Title title="客户信息" style="margin-bottom: 32px;"/>
    <div class="client-form">
      <el-form
        ref="formRef"
        :model="paramsObj"
        :rules="formRules"
        :disabled="disabledTaxAmount || editLimt"
        class="edit-client el-form-box-left"
        label-position="left"
        label-width="90px">
        <el-form-item style="margin-right:108px;" label="客户名称" prop="clientId">
          <!-- show-tool-tip="clientName"
            placement="right" -->
          <selectWithoutHttp
            v-model="paramsObj.clientId"
            :remote-method="getClientNameMethods"
            :list-data="clientNameOption.items"
            :default-list="defaultClientOption"
            label-name="clientName"
            extend-class="mengli-order-client-select"
            key-name="id"
            filterable
            remote
            placeholder="搜索匹配" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import Title from '@/components/Title';
// components
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
// api
import { getMengliCustomerList } from '@/api/mengli';
export default {
  components: { Title, selectWithoutHttp },
  props: {
    isClientDisabled: {
      type: Boolean,
      default: false
    },
    editLimt: {
      type: Boolean,
      default: false
    },
    isOtherInfoDisabled: {
      type: Boolean,
      default: false
    },
    disabledTaxAmount: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultClientOption: [],
      defaultMarketOption: [], // 默认销售列表
      defaultMastermindOption: [],
      clientNameOption: [], // 客户列表
      paramsObj: {
        clientId: ''
      },
      formRules: {
      },
      page: 1,
      perPage: 1000
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    })
  },
  created() {
    if (!this.isClientDisabled) {
      this.formRules = {
        clientId: [{ required: true, trigger: 'change', message: '请选择的客户名称' }]
      };
    } else {
      this.formRules = {
      };
    }
    this.getClientNameMethods(null);
  },
  methods: {
    // 编辑时注入数据
    insertDetail(item) {
      const clientInfo = item.clientInfo;
      if (clientInfo.clientId) this.paramsObj.clientId = clientInfo.clientId;
      this.defaultClientOption = [{ id: clientInfo.clientId, clientName: clientInfo.clientName }];
    },
    validateForm(validate = true) {
      return new Promise((resolve, reject) => {
        if (validate) {
          this.$refs.formRef.validate(valid => {
            if (valid) {
              resolve(valid);
            } else {
              reject();
            }
          });
        } else {
          resolve(true);
        }
      });
    },
    // 提供给父组件来获取参数
    getParams() {
      const params = _.cloneDeep(this.paramsObj);
      return params;
    },
    // 获取客户列表
    getClientNameMethods(name = '') {
      const params = {
        clientName: name,
        page: this.page,
        perPage: this.perPage
      };
      getMengliCustomerList(params).then(res => {
        this.clientNameOption = res.data;
      }).catch(err => {
        console.log(err);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.client-info {
  // max-height: 692px;
  background: #fff;
  border-radius: 12px;
  box-shadow:2px 4px 13px 0px rgba(221,225,234,1);
  padding: 24px 24px 0 24px;
  .edit-client {
    display: flex;
    &::v-deep {
      .el-form-item__label {
        width: 90px !important;
        line-height: 1.1 !important;
        display: flex;
        align-items: center;
        height: 32px;
      }
      .el-input__inner  {
        width: 240px;
        line-height: 16px;
      }
    }
  }
}
</style>
<style lang="scss">
.mengli-order-client-select {
  width: 240px;
}
</style>
